<template>
  <div class="page-container page-container-detail-page" :style="{height:HEIGHT+'px'}">
    <!--面包屑-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员权益设置</el-breadcrumb-item>
        <el-breadcrumb-item>查看权益</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--工具栏-->
    <div class="toolbar page-container-detail">
      <el-form :model="dataForm"  ref="dataForm" :size="size">
          <el-form-item class="mb30">
            <span class="font14 color333">所属组织：</span>
            <span class="font14 color333">{{dataForm.deptName}}</span>
          </el-form-item >
          <el-form-item label="权益名称："  prop="legalRuleName" class="w200 labelTextSize14 color999 mb30">
           <el-input v-model="dataForm.legalRuleName" auto-complete="off" :disabled="true" clearable maxlength="20" class="width200"></el-input>
          </el-form-item>
          <el-form-item label="权益类型：" prop="legalRuleType" class="w200 labelTextSize14 color999 mb30">
              <el-select v-model="dataForm.legalRuleType" @change="selectModel($event)" placeholder="请选择" :size="size" :disabled="disabled" clearable class="width200">
                <el-option
                  v-for="item in ruleTypeList"
                  :key="item.id"
                  :label="item.ruleName"
                  :value="item.id"
                ></el-option>
              </el-select>
          </el-form-item>
          
        <el-row v-if="this.dataForm.legalRuleType==1">
          <el-form-item label="购物全场：" prop="ruleValue" class="labelTextSize14 color999 w200 mb30">
            <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable  class="width200" :disabled="true"></el-input><span class="font14 color999 turnInlineBlock m_l10">折</span>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==2">
          <el-form-item label="下单多赠送：" prop="ruleValue" class="labelTextSize14 color999 w200 mb30">
                <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable  class="width200" :disabled="true"></el-input><span class="font14 color999 turnInlineBlock m_l10">倍积分</span>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==3">
          <el-form-item class="mb30" >
             <el-radio-group v-model="dataForm.freightMode" :disabled="disabled">
                <el-radio :label="1"  class="form-radio mr60">免运费</el-radio>
                <el-radio :label="2"  class="form-radio">减运费</el-radio>
             </el-radio-group>
          </el-form-item>
          <el-form-item v-if="this.dataForm.freightMode==2">
              <div v-for="(item,index) in dataForm.logisticsIncrement" :key="index" >
                <el-form-item class="formItemNoMargin">
                    <el-form-item  label="下单满：" class="labelTextSize14 color999 w200 mb30" label-width="70px">
                        <el-input  type="text" v-model="dataForm.logisticsIncrement[index].satisfyOrder" placeholder="输入数字" clearable
                         class="width200" :disabled="true"></el-input>
                        <span class="trunInlineBlock font14 color999 m_l10 mr10">元，减免</span>
                         <el-input  type="text" v-model="dataForm.logisticsIncrement[index].reductionMoney" placeholder="输入数字" clearable
                        :disabled="true"></el-input>
                        <span class="trunInlineBlock font14 color999 m_l10">元运费</span>
                    </el-form-item>
                </el-form-item>
              </div>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==4">
          <el-form-item label="抽奖活动每日赠送：" prop="ruleValue" class="labelTextSize14 color999 w200">
                <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable  :disabled="true"></el-input><span class="font14 color999 turnInlineBlock m_l10">次</span>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==5">
          <el-form-item label="免费查看：" prop="ruleValue" class="labelTextSize14 w200 color999">
                <el-input placeholder="请输入" v-model="dataForm.ruleValue" clearable  class="width200" :disabled="true"></el-input><span class="font14 color999 turnInlineBlock m_l10">付费板块</span>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==6">
          <el-form-item >
            <span class="font14 color999 turnInlineBlock w70 t_r">描述：</span>
            <span class="font14 color999">拥有专有客服</span>
          </el-form-item>
        </el-row>
        <el-row v-if="this.dataForm.legalRuleType==7">
          <el-form-item>
               <span class="font14 color999 turnInlineBlock w70 t_r">描述：</span>
               <span class="font14 color999">购买VIP，自动从当前等级升级一个等级</span>
          </el-form-item>
        </el-row>
      </el-form>
      <!-- 店铺信息 -->
      <div class="active3 tab-container tab-container-noPadding">
        <el-tabs type="border-card" v-if="dataForm.legalRuleType==1 || dataForm.legalRuleType==2 || dataForm.legalRuleType==3">
        <el-tab-pane label="选择店铺">
          <el-row>
            <el-row>
                <el-form :inline="true" :model="storeSearchForm" size="mini" ref="storeSearchForm">
                  <el-row class="search-input">

                  <el-form-item label="店铺编码：" prop="storeCode">
                    <el-input v-model="storeSearchForm.storeCode" clearable maxlength="80" placeholder="输入店铺编码"></el-input>
                  </el-form-item>
                  <el-form-item label="店铺名称：" prop="storeName">
                    <el-input v-model="storeSearchForm.storeName" clearable maxlength="80" placeholder="输入店铺名称"></el-input>
                  </el-form-item>
                  <el-form-item label="所属商家：" prop="merchantName">
                    <el-input v-model="storeSearchForm.merchantName" clearable maxlength="80" placeholder="输入所属商家"></el-input>
                  </el-form-item>
                  <el-form-item label="店铺类型：" prop="storeType">
                          <el-select v-model="storeSearchForm.storeType" placeholder="全部" size="mini" clearable>
                          <el-option label="自营店铺" value="0"></el-option>
                          <el-option label="入驻店铺" value="1"></el-option>
                        </el-select>
                  </el-form-item>
                  </el-row>
                </el-form>
                 <el-row class="search-button">
                    <el-button type="primary" size="mini" @click="storeSearch()" icon="el-icon-search">搜索</el-button>
                  </el-row>
            </el-row>
            <div class="t_l mb30">
              <el-button  type="primary"  plain  size="mini" v-if="storeTableDataTatol<=9999">已选店铺({{storeTableDataTatol}})</el-button>
              <el-button type="primary" plain size="mini" v-else>已选商品(9999+)</el-button>
            </div>
          </el-row>
          <el-table :data="storeTableData"  @selection-change="storeTableDataselectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="店铺编号">
              <template slot-scope="scope">
                <span>{{ scope.row.storeCode}}</span>
              </template>
            </el-table-column>
            <el-table-column label="店铺名称">
              <template slot-scope="scope">
                <span>{{ scope.row.storeName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="店铺类型">
              <template slot-scope="scope">
                <span v-if="scope.row.storeType =='1'">入驻店铺</span>
                <span v-if="scope.row.storeType =='0'">自营店铺</span>
              </template>
            </el-table-column>
            <el-table-column label="所属商家">
              <template slot-scope="scope">
                <span>{{ scope.row.merchantName}}</span>
              </template>
            </el-table-column>
           
          </el-table>
          <!--分页栏-->
          <div class="toolbar t_r">
            <el-pagination
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="mainSroreMerchantRefreshPageRequest"
              :current-page="mainStoreMerchantForm.pageNo"
              :page-size="mainStoreMerchantForm.pageSize"
              :total="storeTableDataTatol"
              style="float:right;"
              :page-sizes="[10, 20, 30, 40]"
              @size-change="mainSroreMerchantHandleSizeChange"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <!-- 商品信息 -->
        <el-tab-pane label="选择商品">
          <el-row>
            <div>
              <el-form :inline="true" :model="merchantProductSearchForm" size="mini" ref="merchantProductSearchForm" >
                <el-row class="search-input">
                <el-form-item label="商品分类：" prop="categoryName" class="mb30">
                  <el-input v-model="merchantProductSearchForm.categoryName" clearable placeholder="输入商品分类" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品编码：" prop="mpCode" class="mb30">
                  <el-input v-model="merchantProductSearchForm.mpCode" clearable placeholder="输入商品编码" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item label="商品名称：" prop="mpName" class="mb30">
                  <el-input v-model="merchantProductSearchForm.mpName" clearable placeholder="输入商品名称" maxlength="80"></el-input>
                </el-form-item>
                </el-row>
              </el-form>
               <el-row class="search-button">
                  <el-button type="primary" size="mini" @click="powerProductSearch()" icon="el-icon-search">搜索</el-button>
                </el-row>
            </div>
            <div class="t_l mb30">
              <el-button  type="primary"  plain  size="mini" v-if="merchantProductTableDataTotal<=9999">已选商品({{merchantProductTableDataTotal}})</el-button>
              <el-button type="primary" plain size="mini" v-else>已选商品(9999+)</el-button>
            </div>
          </el-row>
          <el-table
              :data="merchantProductTableData"
              :size="size"
              row-key="id"
              default-expand-all
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              @selection-change="repelSelectionChange"
              class="tableStyle"
            >
              <el-table-column type="selection" width="55" align="center"></el-table-column>
              <el-table-column prop="mpCode" label="商品编码" width="180" align="left"></el-table-column>
              <el-table-column prop="productName" label="商品名称" width="180" sortable align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.mpName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="storeName" label="商品分类" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.categoryName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="salePrice" label="商品价格" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.salePrice}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="storeName" label="所属店铺" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.storeName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="merchantName" label="所属商家" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.merchantName}}</span>
                </template>
              </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar t_r">
              <el-pagination
                @size-change="handleSizeChangeMerchantProductTableData"
                @current-change="handleCurrentChangeMerchantProductTableData"
                :current-page="merchantProductSearchForm.start"
                :page-sizes="[10]"
                style="float:right;"
                :page-size="merchantProductSearchForm.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="merchantProductTableDataTotal"
              ></el-pagination>
            </div>
        </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import marketRequest from "@/market/request/marketRequest";
import CyTable from "@/views/Core/JicTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import {
  validatePhone,
  validateContacts,
  isEmail,
  isNumber
} from "@/utils/validate";
import XLSX from "xlsx";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  created() {
    //单个参数传递的时候
    this.id = this.$route.query.id; //获取上个页面传递的id,在下面获取数据的时候先提交id
    this.type = this.$route.query.type;
  },
  data() {
    return {
      disabled: true,
      logistics:false,
      activity:false,
      content:false,
      storeTableData2:[],
      ruleRangeForm:{},
      tableDataTwo: [],
      merchantFormStore: {
        start: 1,
        limit: 10
      },
      productForm: {
        start: 1,
        limit: 10,
        goodsName: null,
        thirdSpuId: null,
        goodsCategory: null,
        productName: "",
        productNo: "",
        barCode: "",
        chineseName: "",
        code: ""
      },
      storeForm: {
        start: 1,
        limit: 10,
        merchantIds: "",
        storename: "",
        storecode: "",
        orgNumber: "",
        merchantName: "",
        storeType:''
      },
      merchantProductSearchForm: {
          merchantId: null,
          mpCode: null,
          mpName: null,
          categoryName: null,
          start: 1,
          limit: 10
        },
      mainStoreMerchantForm: {
        start: 1,
        limit: 10,
      },
      storeSearchForm: {
        childName: "",
        storeCode: "",
        storeName: "",
        merchantName: "",
        storeType: "",
        start: 1,
        limit: 10
      },
      rulePowerFormRulesFirst:{
            //  legalRuleName: [{ required: true, message: "", trigger: "blur" }],
            // legalRuleType: [{ required: true, message: "", trigger: "change" }],
          },
      rulePowerFormRules: {
          //ruleValue: [{ required: true, message: "请输入必填项", trigger: "blur" }],
          // satisfyOrder: [{ required: true, message: "请输入必填项", trigger: "blur" }],
          // reductionMoney: [{ required: true, message: "请输入必填项", trigger: "blur" }],
      },
      rulePowerForm: {
          rtypeId: "",
          mode:1,
          orderConsume:"",
          deptName:"",
          logisticsIncrement: [{satisfyOrder:null,reductionMoney:null}],
          freightMode:1,
          legalRuleType:'',
          legalRuleName:'',
          ruleValue:null,
      },
      // 新增编辑界面数据
        dataForm: {
          id:'',
          legalRuleType:"",
          deptName:"",
          legalRuleName: "",
          ruleValue:null,
          freightMode:1,
          logisticsIncrement: [{satisfyOrder:"",reductionMoney:""}],
        },
      merchantProductTableDataTotal: 0,
      merchantProductTotalCount: 0,
      storeTableDataTatol: 0,
      merchantProductTableData: [],
      storeTableData: [],
       ruleTypeList: [{
          id: '1',
          ruleName: '购物权益'
        }, {
          id: '2',
          ruleName: '积分权益'
        }, {
          id: '3',
          ruleName: '物流权益'
        }, {
          id: '4',
          ruleName: '活动特权'
        }, {
          id: '5',
          ruleName: '内容特权'
        }, {
          id: '6',
          ruleName: '服务特权'
        }, {
          id: '7',
          ruleName: '等级升级'
        }],
      imgUrl:'',
      activeName: "first",
      merchantTableDataTatolStore: 0,
      HEIGHT: window.innerHeight,
      type: null,
      vipLabel: "",
      tableData: [],
      data: [],
      startTime: null,
      endTime: null,
      id: null,
      businessId: "",
      deptMsg:JSON.parse(localStorage.getItem("user")).deptType,//当前登录组织信息
      userId: localStorage.getItem("userId"), //当前登录用户id
      deptType: localStorage.getItem("deptType"), //当前登录用户所属组织类型
      deptName: null,
      content: null,
      size: "small",
      pageResult: {},
      value: 0,
      editLoading: false,
    };
  },
  methods: {
    //获取基础信息
      queryBasic(){
        let this_=this
        let query={}
        query.id=this.id;
        query.start=1;
        query.limit = 10;
        this.utils.request.queryMemberLegalRuleList(query, function (res) {
          if (res.code == '0000') {
              this_.dataForm.id=res.data.rows[0].id;
              this_.dataForm.deptName=res.data.rows[0].deptName;
              this_.dataForm.legalRuleName=res.data.rows[0].legalRuleName;
              this_.dataForm.legalRuleType=res.data.rows[0].legalRuleType;
              this_.queryInfo(res.data.rows[0].legalRuleType,this_.id);
              //查询权益店铺
              this_.storeSearch();
              //查询权益商品
              this_.powerProductSearch();
          }
        });
      },
      //查询数据渲染表格
      queryInfo(legalRuleType,id){
        let query={};
        let this_=this;
        query.legalRuleType=legalRuleType;
        query.id=id;
        this.utils.request.queryMemberPowerInfo(query,function(res){
          if(res.code == '0000'){
            if(this_.dataForm.legalRuleType==3){
              if(res.data.freightMode==1){
                this_.dataForm.freightMode=res.data.freightMode;
              }else if(res.data.freightMode==2){
                this_.dataForm.freightMode=res.data.freightMode;
                this_.dataForm.logisticsIncrement=res.data.logisticsIncrement.length == 0? this_.dataForm.logisticsIncrement:res.data.logisticsIncrement;
              }
            }else{
                this_.dataForm.ruleValue=res.data.ruleValue;
            }
            
          }
        })
      },
      //权益店铺查询方法
    storeSearch(){
      this.storeSearchForm.legalRuleId=this.id;
      let this_=this;
      this.utils.request.queryPowerStoreList(this.storeSearchForm,function(res){
        if (res.code == "0000") {
             this_.storeTableDataTatol=res.data.total;
             this_.storeTableData=res.data.rows;
            } 
      });
    },
    //权益商品列表查询
    powerProductSearch(){
      let this_=this;
      this_.merchantProductSearchForm.legalRuleId=this_.id;
      this.utils.request.querySpuListForTable(this_.merchantProductSearchForm,function(res){
         if (res.code == "0000") {
            this_.merchantProductTableData = res.data.rows;
            this_.merchantProductTableDataTotal = res.data.total;
            this_.merchantProductTotalCount = res.data.totalCount;
        } 
      });
    },
    // 换页刷新
    producthandleCurrentChange(pageNum) {
      this.productForm.start = pageNum;
      this.productFormFind();
    },
    producthandleSizeChange(pageSize) {
      this.productForm.start = 1;
      this.productForm.limit = pageSize;
      this.productFormFind();
    },
    //确定 选择店铺
    storeTableData2Click() {
      this.merchantTableDataSubmit2();
    },
    //选择店铺
    storeTableData2AddSelectionChange(val) {
      this.addSelectionStoreTableData2 = val;
    },
     // 换页刷新
    handleSizeChangeStore: function(pageSize) {
      this.storeForm.limit = pageSize;
      this.storeForm.start = 1;
      this.storeFormFind();
    },
    // 换页刷新
    refreshPageRequestStore: function(pageNum) {
      this.storeForm.start = pageNum;
      // this.merchantFormFind();
      this.storeFormFind();
    },
    resetStoreForm() {
      this.$refs["storeForm"].resetFields();
      this.storeFormFind();
    },
    resetProductTable(){
      this.$refs["merchantProductSearchForm"].resetFields();
      this.powerProductSearch();
    },
    //查询店铺
    storeFormFind() {
        var this__ = this;
        this.utils.request.queryStoreList(this.storeForm, function(res) {
          if (res.code == "0000") {
              this__.storeTableData2 = res.data.rows;
              this__.merchantTableDataTatolStore = res.data.total;
          }
        });
      },
       // 商品方法开始
      productFormFind() {
        let that_ = this;
        marketRequest.promotionSpuPageByPromotionId(this.productForm, function(
          resp
        ) {
          if (resp.code == "0000") {
            that_.tableDataTwo = resp.data.rows.map((ele, index) => {
              let spu = {};
              spu.id = ele.id;
              spu.code = ele.thirdSpuId;
              spu.chineseName = ele.goodsName;
              spu.totalStock = ele.stock;
              spu.goodsCategory = ele.goodsCategory;
              spu.merchantName = ele.merchantName;
              spu.storeName = ele.storeName;
              spu.salePriceScope = ele.salePriceScope;
              spu.measureUnit = ele.measureUnit;
              return spu;
            });
            that_.productListTotal = resp.data.total;
          }
        });
      },
      handleCurrentChangeMerchantProductTableData(pageNum) {
        this.merchantProductSearchForm.start = pageNum;
        this.powerProductSearch();
      },
      handleSizeChangeMerchantProductTableData(val) {
        this.merchantProductSearchForm.limit = val;
        this.powerProductSearch();
      },
      // 
      repelSelectionChange(val) {
        this.repelSelection = val;
      },
    // 换页刷新
      mainSroreMerchantHandleSizeChange: function(pageSize) {
        this.storeSearchForm.start = 1;
        this.storeSearchForm.limit = pageSize;
        this.storeSearch();
      },
      // 换页刷新
      mainSroreMerchantRefreshPageRequest: function(pageNum) {
        this.storeSearchForm.start = pageNum;
        this.storeSearch();
      },
      storeTableDataselectionChange(val) {
      this.storeTableDataSelection = val;
      },
      //店铺重置按钮
      resetStoreSearch() {
        this.$refs["storeSearchForm"].resetFields();
        this.storeSearch();
      },
     //table的双色条纹
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return "warning-row";
        } else if (rowIndex === 3) {
          return "success-row";
        }
        return "";
      },
      //修改table header的背景色
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return "background-color:rgb(250,250,250);";
        }
      },
      
    //返回上一层
    back() {
      this.$router.go(-1);
    }
  },
  mounted() {
    this.queryBasic();
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner   {
  width: 200px !important;
}
/deep/ .el-form-item el-label{
      content: '*';
      color: #F56C6C;
      margin-right: 4px;
}
.page-container-detail {
  padding: 35px 60px 60px !important;
}
.noMarginL {
  margin-left: 0 !important;
}
.textRed {
  color: red !important;
}
.inputWidth200{
  width: 200px !important;
}
.formItemNoMargin {
  margin-bottom: 0 !important;
}
.w70{
  width: 70px;
}
.turnInlineBlock{
  display: inline-block !important;
}
.overh{
  overflow: hidden;
}
/deep/ .el-tabs__item.is-disabled {
  color: #999999;
  font-size: 16px;
}
/deep/ .el-tabs__item {
  padding: 0 30px;
}
/deep/ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
.el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0;
}
/deep/ .el-tabs__active-bar {
  height: 4px;
  color: #409eff;
  border-radius: 2px;
}
/deep/ .el-tabs__nav-wrap::after {
  height: 1px;
}
/deep/ .el-tabs__header {
  margin-bottom: 40px !important;
}
/deep/ .width200{
  width:200px !important;
  /deep/ .el-input__inner{
    width: 200px !important;
  }
}
</style>
